<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet" />
		<link href="css/animate.css" rel="stylesheet" />
		<link href="css/style.css?v=4.1.0" rel="stylesheet" />
		<style>
			.el-row {
				margin-bottom: 20px;
			}
			.el-col {
				border-radius: 4px;
			}
			.bg-purple-dark {
				background: #99a9bf;
			}
			.bg-purple {
				background: #d3dce6;
			}
			.bg-purple-light {
				background: #e5e9f2;
			}
			.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}
			.row-bg {
				padding: 10px 0;
				background-color: #f9fafc;
			}
		</style>
	</head>

	<body class="gray-bg">
		<!-- 全局js -->
		<div id="app">
			<el-menu
					:default-active="activeIndex2"
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
			>
			</el-menu>
			<template>
				<el-table
						:data="tableData"
						style="width: 100%"
						:row-class-name="tableRowClassName"
						@selection-change="handleSelectionChange">
					<el-table-column
							type="selection"
							width="55">
					</el-table-column>
					<el-table-column
							type="index"
							width="50">
					</el-table-column>
					<el-table-column
							prop="file"
							label="文件名"
							align="center"
					>
						<!--  <a href="/webxx/wj/up/filename=file">文件下载</a>-->
					</el-table-column >
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button type="danger"plain @click="kan(scope.$index, scope.row)" >查看</el-button>
							<el-button type="primary" plain @click="ups(scope.$index, scope.row)">下载</el-button>
							<el-button type="warning"plain @click="shan(scope.$index, scope.row)">删除</el-button>

						</template>
					</el-table-column>
				</el-table>
			</template>
			<!--分页工具条-->
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[4, 8, 12]"
					:page-size="4"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount">
			</el-pagination>
		</div>
		<script src="js/vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.7"></script>
		<script src="js/plugins/layer/layer.min.js"></script>

		<!-- 自定义js -->
		<script src="js/content.js"></script>

		<!-- 欢迎信息 -->
		<script src="js/welcome.js"></script>
		<script>
			// 创建一个新的 Vue 实例
			var app = new Vue({
				el: '#app',
				mounted(){
					//当页面加载完成后，发送异步请求，获取数据

					this.selectAll();

				},
				data() {
					return {
						// 每页显示的条数
						pageSize:4,
						// 总记录数
						totalCount:100,
						// 当前页码
						currentPage: 1,
						dialogVisible:false,
						dialogVisible1:false,
						activeIndex: '1',
						activeIndex2: '1',
						input:'',input1:'',
						selectedIds:[],
						// 复选框选中数据集合
						multipleSelection: [],
						file:'',
						tableData: [{
							file:''
						}, {
							file:''
						}]
					};
				},
				methods: {
					handleSelectionChange(val) {
						this.multipleSelection = val;

					},
					tableRowClassName({row, rowIndex}) {
						if (rowIndex === 1) {
							return 'warning-row';
						} else if (rowIndex === 3) {
							return 'success-row';
						}
						return '';
					},
					handleSizeChange(val) {
						this.pageSize=val;
						this.selectAll();

					},
					handleCurrentChange(val) {
						this.currentPage=val;
						this.selectAll();
					},
					selectAll(){
						var _this=this;
						axios({
							method:"get",
							url:"http://localhost:8080/wenxian-master/wj/file?currentPage="+this.currentPage+"&pageSize="+this.pageSize

						}).then(function (resp)
						{
							_this.tableData=resp.data.rows;
							_this.totalCount=resp.data.totalCount;
						})


					},
					ups(index, row)
					{
						window.open("http://localhost:8080/wenxian-master/wj/up?filename="+row.file);
						/* var _this=this;
                         axios({
                             method:"post",
                             url:"http://localhost:8080/webxx/wj/up",
                             data:row.file

                         })*/
					},kan(index, row)
					{
						window.open("http://localhost:8080/wenxian-master/upload/"+row.file);
					},
					shan(index,row)
					{
						this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							//用户点击确认按钮

							//2. 发送AJAX请求
							var _this = this;

							// 发送ajax请求，添加数据
							axios({
								method:"post",
								url:"http://localhost:8080/wenxian-master/wj/shan",
								data:row.file
							}).then(function (resp) {
								if(resp.data == "success"){
									//删除成功

									// 重新查询数据
									_this.selectAll();
									// 弹出消息提示
									_this.$message({
										message: '恭喜你，删除成功',
										type: 'success'
									});

								}
							})
						}).catch(() => {
							//用户点击取消按钮

							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});


					}

				}
			});
		</script>
	</body>
</html>
